<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly" class="zs-drawer-custom">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">说明</div>
			</div>
		</template>
		<template #default>
			<div class="zs-drawer-container zs-layout-flex-col">
				<el-input class="zs-layout-grow dashboard-projectAllListDesDialog-input" :class="{ 'dashboard-projectAllListDesDialog-input-disabled': !isEditing }" v-model="des" type="textarea" placeholder="" :disabled="!isEditing" />
				<div v-if="approvalStatus != 1" class="zs-layout-flex-row zs-layout-justify-end zs-space-top-bg">
					<el-button class="zs-btn-md zs-btn-primary" @click="edit()" v-if="!isEditing">编辑</el-button>
					<el-button class="zs-btn-md zs-btn-primary" @click="confirmClick('save', '')" v-if="isEditing">保存</el-button>
					<el-button class="zs-btn-md zs-btn-primary" @click="confirmDrawer = true" v-if="isEditing">提交</el-button>
				</div>
			</div>
		</template>
	</el-drawer>

	<DialogConfirmSubmit v-if="confirmDrawer" :curDrawerSize="curDrawerSize" :isShow="confirmDrawer" @close="closeDrawer"> </DialogConfirmSubmit>
</template>

<script setup>
	import { ref } from 'vue';
	import { useStore } from 'vuex';
	import detailApi from '@/api/Manage/Business/detailPages';
	import DialogConfirmSubmit from '@/components/dialogConfirmSubmit.vue';

	let store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSize);
	const props = defineProps({
		isShow: { type: Boolean, default: false },
		projectCode: { type: String, default: '' },
		yearmonth: { type: String, default: '' },
		isReadOnly: { type: Boolean, default: false },
	});
	const emit = defineEmits(['close']);
	const isShowDrawer = ref(props.isShow);
	// 关闭drawer
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};
	const cancelClick = () => {
		isShowDrawer.value = false;
		emit('close', { isShow: false });
	};
	const des = ref('');
	const id = ref('');
	const approvalStatus = ref('');
	const isEditing = ref(false);

	const edit = () => {
		isEditing.value = true;
	};

	//提交
	let confirmDrawer = ref(false);
	const closeDrawer = async data => {
		confirmDrawer.value = data.isShow;
		if (data.isSuccess) {
			confirmClick('submit', data.fdPostId);
		}
	};

	const confirmClick = (type, fdPostId) => {
		let approvalStatus = type == 'submit' ? 1 : 0;
		detailApi.bedgetcExplainSaveApi({ biProjectCode: props.projectCode, remark: des.value, yearmonth: props.yearmonth, approvalStatus: approvalStatus, isSubmit: approvalStatus, id: id.value, fdPostId: fdPostId }).then(res => {
			if (res.data.code == 200) {
				cancelClick();
			}
		});
	};

	const getDes = () => {
		detailApi.bedgetcExplainInfoApi({ biProjectCode: props.projectCode, yearmonth: props.yearmonth }).then(res => {
			if (res.data.code == 200 && res.data.data) {
				des.value = res.data.data.remark;
				id.value = res.data.data.id;
				approvalStatus.value = res.data.data.approvalStatus;
			}
		});
	};

	getDes();
</script>

<style lang="scss">
	.dashboard-projectAllListDesDialog-input .el-textarea__inner {
		height: 100% !important;
		width: 100% !important;
		background: #f5f7fe;
	}
	.dashboard-projectAllListDesDialog-input-disabled .el-textarea__inner {
		background-color: #ffffff !important;
	}
</style>

<style scoped lang="scss"></style>
